<template>
  <ContentWrap class="config-page !mb-0">
    <div class="mb-20px">
      <span class="text-16px font-bold">幼儿考勤设置</span>
    </div>

    <el-form :model="formData" label-width="120px" ref="formRef">
      <el-form-item label="规定入园时间" prop="scheduledEntryTime">
        <el-time-picker
          v-model="formData.scheduledEntryTime"
          value-format="HH:mm:ss"
          format="HH:mm:ss"
          placeholder="请选择规定入园时间"
          style="width: 240px"
        />
        <el-tooltip class="item" content="晚于入园时间刷卡进门的，算作迟到" placement="right">
          <Icon icon="ep:question-filled" class="ml-5px" />
        </el-tooltip>
      </el-form-item>

      <el-form-item label="规定离园时间" prop="scheduledExitTime">
        <el-time-picker
          v-model="formData.scheduledExitTime"
          value-format="HH:mm:ss"
          format="HH:mm:ss"
          placeholder="请选择规定离园时间"
          style="width: 240px"
        />
        <el-tooltip class="item" content="早于离园时间刷卡出门的，算作早退" placement="right">
          <Icon icon="ep:question-filled" class="ml-5px" />
        </el-tooltip>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm" :loading="formLoading">保存</el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>
</template>

<script setup lang="ts">
import { DeviceGateConfigApi, DeviceGateConfig } from '@/api/school/smartDevice/gateConfig'

/** 考勤设置配置 */
defineOptions({ name: 'DeviceGateConfig' })

const message = useMessage() // 消息弹窗

const formRef = ref() // 表单 Ref
const formLoading = ref(false) // 表单加载状态
const formData = ref({
  id: undefined,
  scheduledEntryTime: undefined,
  scheduledExitTime: undefined,
  status: undefined
})

/** 查询详情 */
const getConfig = async () => {
  try {
    const data: any = await DeviceGateConfigApi.getDeviceGateConfig()
    formData.value = {
      id: data.id,
      scheduledEntryTime: data.scheduledEntryTime || undefined,
      scheduledExitTime: data.scheduledExitTime || undefined,
      status: data.status
    }
  } catch (err) {
    console.log('暂无配置数据')
  }
}

/** 提交表单 */
const submitForm = async () => {
  try {
    // 准备提交数据
    const submitData: DeviceGateConfig = {
      scheduledEntryTime: formData.value.scheduledEntryTime,
      scheduledExitTime: formData.value.scheduledExitTime
    } as DeviceGateConfig

    formLoading.value = true
    // 如果存在ID，则为更新操作，否则为创建操作
    if (formData.value.id) {
      submitData.id = formData.value.id
      await DeviceGateConfigApi.updateDeviceGateConfig(submitData)
      message.success('更新成功')
    } else {
      const res: any = await DeviceGateConfigApi.createDeviceGateConfig(submitData)
      formData.value.id = res.id
      message.success('创建成功')
    }

    // 重新获取配置
    await getConfig()
  } catch (err) {
    message.error('操作失败: ' + (err as any).message)
  } finally {
    formLoading.value = false
  }
}

/** 初始化 **/
onMounted(() => {
  getConfig()
})
</script>
<style lang="scss" scoped>
.config-page {
  min-height: $content-height;
}
</style>
